<template>
  <div class="page_main">
    <div class="header">
      <div class="title">市场下单表</div>
      <div class="fill_date" v-loading="formLoading">填表日期：{{ cuForm.fill_date|formatDate }}</div>
    </div>
    <div class="content">
      <el-form ref="cuForm" v-loading="formLoading" :model="cuForm" :rules="rules" :disabled="formDisabled">
        <table class="mailTable">
          <tr class="firstTr">
            <td class="firstTd column tip_td">
              <span class="tip">*</span>公司
            </td>
            <td colspan="3" class="column">
              <el-form-item prop="dept_id">
                <el-select v-model="cuForm.dept_id" style="width: 100%" placeholder="请选择公司">
                  <el-option v-for="item in companyArr" :label="item.head" :value="item.id" :key="item.id"></el-option>
                </el-select>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="firstTd column tip_td">
              <span class="tip">*</span>项目
            </td>
            <td class="column">
              <el-form-item prop="customer_id">
                <el-select v-model="cuForm.customer_id" filterable style="width: 100%" placeholder="请选择项目"
                           @change="customerChange"
                >
                  <el-option v-for="item in customerArr" :label="item.name" :value="item.id" :key="item.id"></el-option>
                </el-select>
              </el-form-item>
            </td>
            <td class="firstTd column tip_td">
              <span class="tip">*</span>合同
            </td>
            <td class="column">
              <el-form-item prop="contract_id">
                <el-select v-model="cuForm.contract_id" style="width: 100%" placeholder="请选择合同"
                           @change="contractChange"
                >
                  <el-option v-for="item in contractArr" :label="item.part_a+'——'+item.contract_num" :value="item.id"
                             :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="firstTd column tip_td">
              <span class="tip">*</span>关联销售单
            </td>
            <td colspan="3" class="column">
              <el-form-item prop="bill_sale_id">
                <el-select v-model="cuForm.bill_sale_id" style="width: 100%"
                           placeholder="请选择销售单" @change="billSelectChange"
                >
                  <el-option v-for="item in billSaleArr" :key="item.id" :value="item.id"
                             :label="item.contract_num+'——'+item.actual_execute_time_start+'~'+item.actual_execute_time_end"
                  ></el-option>
                </el-select>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="firstTd column tip_td">
              <span class="tip">*</span>点位详情
            </td>
            <td colspan="3" class="column">
              <div style="margin-bottom: 20px">
                <el-form>
                  <point-config :data="configData" :read-only="true" :tip-show="false"></point-config>
                </el-form>
              </div>
            </td>
          </tr>
          <tr>
            <td class="firstTd column tip_td">
              <span class="tip">*</span>最晚上刊时间
            </td>
            <td class="column">
              <el-form-item prop="latest_up_date" class="el-form-item_inline-block">
                <el-date-picker
                  v-model="cuForm.latest_up_date"
                  type="date"
                  style="width: 180px"
                  format="yyyy年MM月dd日"
                  value-format="yyyy-MM-dd"
                  placeholder="最晚上刊时间"
                />
              </el-form-item>
              <el-form-item prop="latest_up_time" class="el-form-item_inline-block">
                <el-select style="width: 150px" v-model="cuForm.latest_up_time" placeholder="请选择上下午" clearable>
                  <el-option label="上午" :value="1"/>
                  <el-option label="下午" :value="2"/>
                </el-select>
              </el-form-item>
            </td>
            <td class="column tip_td">
              <span class="tip">*</span>最晚下刊时间
            </td>
            <td class="column">
              <el-form-item prop="latest_down_date" class="el-form-item_inline-block">
                <el-date-picker
                  v-model="cuForm.latest_down_date"
                  type="date"
                  style="width: 180px"
                  format="yyyy年MM月dd日"
                  value-format="yyyy-MM-dd"
                  placeholder="最晚下刊时间"
                />
              </el-form-item>
              <el-form-item prop="latest_down_time" class="el-form-item_inline-block">
                <el-select style="width: 150px" v-model="cuForm.latest_down_time" placeholder="请选择上下午" clearable>
                  <el-option label="上午" :value="1"/>
                  <el-option label="下午" :value="2"/>
                </el-select>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="firstTd column tip_td">
              <span class="tip">*</span>是否第一次上画
            </td>
            <td class="column">
              <el-form-item prop="first_time">
                <el-radio-group v-model="cuForm.first_time">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </td>
            <td class="column tip_td">
              <span class="tip">*</span>是否有新画面
            </td>
            <td class="column">
              <el-form-item prop="has_new_pic">
                <el-radio-group v-model="cuForm.has_new_pic">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="firstTd column tip_td">
              <span class="tip">*</span>画面是否回收
            </td>
            <td class="column">
              <el-form-item prop="pic_need_recycle">
                <el-radio-group v-model="cuForm.pic_need_recycle">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </td>
            <td class="column tip_td">
              <span class="tip">*</span>是否显示代理资源标识
            </td>
            <td class="column">
              <el-form-item prop="show_proxy_flag">
                <el-radio-group v-model="cuForm.show_proxy_flag">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="firstTd column tip_td">
              <span class="tip">*</span>是否需要小样
            </td>
            <td colspan="3" class="column">
              <el-form-item prop="need_sample">
                <el-radio-group v-model="cuForm.need_sample">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="firstTd column tip_td">
              <span class="tip">*</span>设计人员
            </td>
            <td colspan="3" class="column">
              <el-form-item prop="design_user_id">
                <el-select v-model="cuForm.design_user_id" style="width: 100%" placeholder="请选择设计人员" clearable
                           filterable
                >
                  <el-option v-for="user in userArr" :value="user.id" :label="user.name" :key="user.id"></el-option>
                </el-select>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="firstTd colum tip_td">
              <span class="tip">*</span>拍照要求
            </td>
            <td colspan="3" class="column">
              <i style="font-size: 20px;float:left; width: 30px;height: 30px;color:#409EFF;margin-top: 10px"
                 class="el-icon-circle-plus-outline" @click="addPhotoRequeremengt()"
                 v-show="!addDisable() && cuForm.bill_sale_id !== null && !formDisabled"
              ></i>
              <div style="clear: both">
              </div>
              <div>
                <table class="photoRequirementTable" style="width: 100%;margin-bottom: 10px">
                  <tr class="firstTr table-herder">
                    <td class="firstTd column" style="width: 15%">媒体类型</td>
                    <td class="column" style="width: 5%">动作</td>
                    <td class="column" style="width: 5%">照片</td>
                    <td class="column" style="width: 5%">近景</td>
                    <td class="column" style="width: 5%">远景</td>
                    <td class="column" style="width: 10%">时间</td>
                    <td class="column" style="width: 20%">具体要求</td>
                    <td class="column" style="width: 25%">备注</td>
                    <td v-show="!formDisabled" class="column" style="width: 10%">操作</td>
                  </tr>
                  <template v-if="photoRequirementsDataArr.length>0"
                            v-for="(item,index) in photoRequirementsDataArr"
                  >
                    <template v-for="(tmp,i) in item.arr">
                      <tr v-for="(temp,j) in tmp.arr" :key="index+'_'+i+'_'+j">
                        <td v-if="i===0 && j===0" class="firstTd column" :rowspan="getRowSpan(item)">
                          <el-select v-model="item.media_type_id" clearable>
                            <el-option v-for="media in mediaSettingType" :key="media" :label="getPointTypeName(media)"
                                       :disabled="getOptionDisable(media,index)"
                                       :value="media"
                            ></el-option>
                          </el-select>
                        </td>
                        <td v-if="j===0" class="column" :rowspan="tmp.arr.length">
                          {{ temp.shoot_type === 1 ? '上刊' : temp.shoot_type === 2 ? '下刊' : '中间监播' }}
                        </td>
                        <td v-if="j===0" class="column" :rowspan="tmp.arr.length">
                          {{ getAllCount(tmp.arr) }}
                          <el-button v-show="!formDisabled" style="line-height: 100%;margin-left: 10px" type="text"
                                     @click="addPhotoRequeremengt(tmp.arr,temp.shoot_type,item.arr)"
                          >新增
                          </el-button>
                        </td>
                        <td class="column">
                          {{ temp.close_shoot_num ? temp.close_shoot_num : 0 }}
                        </td>
                        <td class="column">
                          {{ temp.far_shoot_num ? temp.far_shoot_num : 0 }}
                        </td>
                        <td class="column">{{ temp.shoot_date }}</td>
                        <td class="column" style="font-size: 12px">
                          <div>
                            {{ temp.baidu_time ? '有百度时间' : '' }}
                            {{ temp.watermark_time ? '有水印时间' : '' }}
                            {{ temp.newspaper_time ? '有报纸时间' : '' }}
                          </div>
                          <div>
                            {{ temp.normal_shoot ? '正常拍摄' : '' }}
                            {{ temp.background_clear ? '背景清晰' : '' }}
                            {{ temp.newpaper_clear ? '报纸清晰' : '' }}
                          </div>
                        </td>
                        <td class="column" style="font-size: 12px;text-align: left">
                          {{ temp.memo }}
                        </td>
                        <td v-show="!formDisabled" class="column">
                          <el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(temp,j,tmp.arr)"
                          ></el-button>
                          <el-button size="mini" type="danger" icon="el-icon-delete"
                                     @click="removeData(j,tmp.arr,i,item.arr,index)"
                          ></el-button>
                        </td>
                      </tr>
                    </template>
                  </template>
                  <tr v-if="photoRequirementsDataArr.length===0">
                    <td class="firstTd column" colspan="9">暂无数据</td>
                  </tr>
                </table>
              </div>
            </td>
          </tr>
          <tr>
            <td class="firstTd colum tip_td">
              备注
            </td>
            <td colspan="3" class="column" style="padding: 10px 20px">
              <el-input v-model="cuForm.memo" type="textarea" :rows="4"></el-input>
            </td>
          </tr>
        </table>
      </el-form>
    </div>
    <FlowBtnRow style="margin-bottom: 20px" :is-new-data="params.is_create"
                :is-applyer="cuForm.flow_applyer_id == userId"
                :flow-status="cuForm.flow_status" :can-check="cuForm.can_check"
                @save="save" @submit="submit" @pass="pass" @returnBack="returnBack" @delete="remove"
                @actualDelete="actualDelete" form-name="cuForm" :flowType="20"
                :dataId="(params || {}).id || ((params || {}).handle_param || {}).id"
    ></FlowBtnRow>

    <el-dialog :title="dialogEdit?'修改拍照要求':'新增拍照要求'" :visible.sync="centerDialogVisible" width="50%" center
               @close="closeDialog"
    >
      <div style="margin-top: 10px">
        <el-form ref="photoRequirementsForm" :model="photoRequirementsData" size="mini"
                 label-width="100px" :rules="photoRequirementsFormRules"
        >
          <el-card shadow="always">
            <el-row>
              <el-col :span="12">
                <el-form-item label="时间" prop="shoot_date">
                  <el-date-picker
                    v-model="photoRequirementsData.shoot_date"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    format="yyyy年MM月dd日"
                    style="width: 200px"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="类型" prop="shoot_type">
                  <el-select v-model="photoRequirementsData.shoot_type" style="width: 200px" clearable
                             placeholder="请选择类型" :disabled="dialogEdit"
                  >
                    <el-option label="上刊" :value="1"></el-option>
                    <el-option label="下刊" :value="2"></el-option>
                    <el-option label="中间监播" :value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="近景">
                  <el-input v-model="photoRequirementsData.close_shoot_num" step="0.01" type="number"
                            style="width: 200px"
                  >
                    <template slot="append">张</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="远景">
                  <el-input v-model="photoRequirementsData.far_shoot_num" step="0.01" type="number"
                            style="width: 200px"
                  >
                    <template slot="append">张</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="百度时间">
                  <el-checkbox v-model="photoRequirementsData.baidu_time"></el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="水印时间">
                  <el-checkbox v-model="photoRequirementsData.watermark_time"></el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="报纸时间">
                  <el-checkbox v-model="photoRequirementsData.newspaper_time"></el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="正常拍摄">
                  <el-checkbox v-model="photoRequirementsData.normal_shoot"></el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="背景清晰">
                  <el-checkbox v-model="photoRequirementsData.background_clear"></el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="报纸清晰">
                  <el-checkbox v-model="photoRequirementsData.newpaper_clear"></el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注">
                  <el-input autosize v-model="photoRequirementsData.memo" type="textarea" placeholder="请输入备注"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="savePhotoRequirementsConfig">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { formatDate, formatDateByFmt } from '@/utils/util'
import PointConfig from '@/components/PointPlanSetting/pointConfig'
import FlowBtnRow from '@/components/FlowBtnRow'
import { company_list_all, list_all } from '@/api/customer/customer'
import { get_company } from '@/api/system/department'
import { cloneDeep, parseInt } from 'lodash'
import { list_media_types } from '@/api/building/building'
import { list_latest_for_market_by_customer_id } from '@/api/contract'
import { detail, list_for_market_by_contract_id } from '@/api/saleOrder'
import { formatData } from '@/views/business/contract/util'
import { list_by_role_code } from '@/api/system/user'
import { actual_delete, begin, detail as marketDetail, pass, remove, return_back, save } from '@/api/merketOrder'

export default {
  name: 'Detail',
  components: { FlowBtnRow, PointConfig },
  filters: {
    formatDate(time) {
      if (time) {
        return formatDateByFmt(time, 'yyyy年MM月dd日')
      }
    }
  },
  data() {
    return {
      cuForm: {
        fill_date: formatDate(new Date()),
        dept_id: null,
        customer_id: null,
        contract_id: null,
        bill_sale_id: null,
        need_sample: null,
        latest_up_date: null,
        latest_up_time: null,
        latest_down_date: null,
        latest_down_time: null,
        first_time: null,
        has_new_pic: null,
        show_proxy_flag: null,
        pic_need_recycle: null,
        design_user_id: null,
        memo: null,
        mediaType2RequireList: {},
        type: 1
      },
      configData: [],
      companyArr: [],
      customerArr: [],
      tmpData: [],
      tmpBillSaleIdArr: [],
      point_type_arr: [],
      centerDialogVisible: false,
      dialogEdit: false,
      photoRequirementsData: {
        shoot_type: null,
        shoot_date: null,
        baidu_time: null,
        watermark_time: null,
        newspaper_time: null,
        normal_shoot: null,
        background_clear: null,
        newpaper_clear: null,
        close_shoot_num: null,
        far_shoot_num: null,
        memo: null
      },
      tmpArr: [],
      tempArr: [],
      index: null,
      contractArr: [],
      billSaleArr: [],
      userArr: [],
      photoRequirementsDataArr: [],
      params: {},
      rules: {
        //  { required: true, message: '公司不能为空', trigger: 'blur' },
        dept_id: [
          { required: true, message: '请选择公司', trigger: 'change' }
        ],
        customer_id: [
          { required: true, message: '请选择项目', trigger: 'change' }
        ],
        contract_id: [
          { required: true, message: '请选择合同', trigger: 'change' }
        ],
        bill_sale_id: [
          { required: true, message: '请选择销售单', trigger: 'change' }
        ],
        need_sample: [
          { required: true, message: '请选择是否需要小样', trigger: 'change' }
        ],
        latest_up_date: [
          { required: true, message: '请选择最晚上刊日期', trigger: 'change' }
        ],
        latest_up_time: [
          { required: true, message: '请选择上下午', trigger: 'change' }
        ],
        latest_down_date: [
          { required: true, message: '请选择最晚下刊日期', trigger: 'change' }
        ],
        latest_down_time: [
          { required: true, message: '请选择上下午', trigger: 'change' }
        ],
        first_time: [
          { required: true, message: '请选择是否第一次上画', trigger: 'change' }
        ],
        has_new_pic: [
          { required: true, message: '请选择是否有新画面', trigger: 'change' }
        ],
        show_proxy_flag: [
          { required: true, message: '请选择是否显示代理资源标识', trigger: 'change' }
        ],
        pic_need_recycle: [
          { required: true, message: '请选择画面是否需要回收', trigger: 'change' }
        ],
        design_user_id: [
          { required: true, message: '请选择设计人员', trigger: 'change' }
        ]
      },
      formLoading: false,
      mustIncludeBillSaleId: null,
      mustIncludeContractId: null,
      photoRequirementsFormRules: {
        shoot_type: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ],
        shoot_date: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ]
      },
      tmpTypeId: null
    }
  },
  computed: {
    mediaSettingType() {
      let arr = []
      arr.push(-1)
      if (this.configData.length > 0) {
        arr = arr.concat(this.configData[0].arr)
      }
      return arr
    },
    userId() {
      return this.$store.state.user.id
    },
    formDisabled() {
      return this.cuForm.flow_status == 3 || this.cuForm.flow_status == 4
    }
  },
  created() {
    const uuid = this.$route.query.uuid
    const params = this.$store.state.keep.pageParamsMap.get(uuid)
    this.params = params
    console.log(params)
    if (params.id || params.handle_param) {
      let id = null
      if (params.id) {
        id = params.id
      } else {
        id = params.handle_param.id
      }
      this.formLoading = true
      marketDetail({ id }).then(res => {
        this.formLoading = false
        this.cuForm = res.data
        if (this.cuForm.flow_status == 3 || this.cuForm.flow_status == 4) {
          this.initCustomerArr()
        } else {
          this.initCustomerArr(true)
        }
        this.mustIncludeBillSaleId = this.cuForm.bill_sale_id
        this.mustIncludeContractId = this.cuForm.contract_id
        this.customerChange(this.cuForm.customer_id, true)
        this.contractChange(this.cuForm.contract_id, true)
        this.configData = formatData(res)
        for (let key in this.cuForm.mediaType2RequireList) {
          let data = {
            media_type_id: parseInt(key),
            arr: []
          }
          for (let i = 1; i < 4; i++) {
            let filter = this.cuForm.mediaType2RequireList[key].filter(item => item.shoot_type === i)
            if (filter && filter.length) {
              let tmp = {
                shoot_type: i,
                arr: cloneDeep(filter)
              }
              data.arr.push(tmp)
            }
          }
          this.photoRequirementsDataArr.push(data)
        }
        this.$set(this.cuForm, 'fill_date', this.cuForm.created_at)
      })
    }
    if (params.is_create) {
      this.initCustomerArr(true)
    }
    if (params.type) {
      this.cuForm.type = params.type
    }
    this.initCompanyArr()
    this.initPointType()
    this.initUserList()
  },
  methods: {
    initCustomerArr(flag = false) {
      if (flag) {
        list_all().then(res => {
          this.customerArr = res.data.map(item => {
            return {
              id: item.id,
              name: item.name
            }
          })
        })
      } else {
        company_list_all().then(res => {
          this.customerArr = res.data.map(item => {
            return {
              id: item.id,
              name: item.name
            }
          })
        })
      }
    },
    initCompanyArr() {
      get_company().then(res => {
        this.companyArr = res.data
      })
    },
    billSelectChange(val) {
      this.configData = []
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      detail({ id: val }).then(res => {
        loading.close()
        this.configData = formatData(res)
      }).catch(() => {
        loading.close()
      })
    },
    /**
     * 初始化点位类型数据
     */
    initPointType() {
      list_media_types().then(
        res => {
          this.point_type_arr = res.data
        }
      )
    },
    getPointTypeName(id) {
      const tmp = this.point_type_arr.find(item => item.id == id)
      if (tmp) {
        return tmp.name
      } else {
        return '全部'
      }
    },
    addPhotoRequeremengt(arr, type, list) {
      this.centerDialogVisible = true
      if (type) {
        this.photoRequirementsData.shoot_type = type
        this.tmpTypeId = type
      }
      this.tempArr = list
      this.tmpArr = arr || []
    },
    savePhotoRequirementsConfig() {
      this.$refs.photoRequirementsForm.validate(flag => {
        if (flag) {
          this.centerDialogVisible = false
          if (this.dialogEdit) {
            this.tmpArr.splice(this.index, 1, this.photoRequirementsData)
          } else {
            if (this.tmpArr.length === 0) {
              let data = {
                media_type_id: null,
                arr: []
              }
              let tmp = {
                shoot_type: this.photoRequirementsData.shoot_type,
                arr: []
              }
              tmp.arr.push(this.photoRequirementsData)
              data.arr.push(tmp)
              this.photoRequirementsDataArr.push(data)
            } else {
              if (this.photoRequirementsData.shoot_type === this.tmpTypeId) {
                this.tmpArr.push(this.photoRequirementsData)
              } else {
                const find = this.tempArr.find(item => item.shoot_type === this.photoRequirementsData.shoot_type)
                if (find) {
                  find.arr.push(this.photoRequirementsData)
                } else {
                  let tmp = {
                    shoot_type: this.photoRequirementsData.shoot_type,
                    arr: []
                  }
                  tmp.arr.push(this.photoRequirementsData)
                  this.tempArr.push(tmp)
                }
              }
            }
          }
          console.log(this.photoRequirementsDataArr)
        }
      })
    },
    closeDialog() {
      this.dialogEdit = false
      this.index = -1
      this.tmpArr = []
      this.tempArr = []
      this.tmpTypeId = null
      this.photoRequirementsData = {
        shoot_type: null,
        shoot_date: null,
        baidu_time: null,
        watermark_time: null,
        newspaper_time: null,
        normal_shoot: null,
        background_clear: null,
        newpaper_clear: null,
        close_shoot_num: null,
        far_shoot_num: null
      }
      this.$nextTick(() => {
        this.$refs.photoRequirementsForm.clearValidate()
      })
    },
    getAllCount(arr) {
      let count = 0
      arr.forEach(item => {
        if (!isNaN(parseInt(item.close_shoot_num))) {
          count += parseInt(item.close_shoot_num)
        }
        if (!isNaN(parseInt(item.far_shoot_num))) {
          count += parseInt(item.far_shoot_num)
        }
      })
      return count
    },
    edit(data, index, arr) {
      this.dialogEdit = true
      this.index = index
      this.photoRequirementsData = Object.assign({}, data)
      this.tmpArr = arr
      this.centerDialogVisible = true
    },
    removeData(j, arr_level3, i, arr_level2, index) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        arr_level3.splice(j, 1)
        if (arr_level3.length === 0) {
          // 如果三级数组没有为空 删除所处的值
          arr_level2.splice(i, 1)
          // 如果二级数组没有为空 删除所处的值
          if (arr_level2.length === 0) {
            this.photoRequirementsDataArr.splice(index, 1)
          }
        }
      }).catch(() => {
      })
    },
    customerChange(val, flag = false) {
      if (!flag) {
        this.cuForm.contract_id = null
        this.cuForm.bill_sale_id = null
      }
      list_latest_for_market_by_customer_id({
        customerId: val,
        mustIncludeContractId: this.mustIncludeContractId
      }).then(res => {
        this.contractArr = res.data
      })
    },
    contractChange(val, flag = false) {
      if (!flag) {
        this.cuForm.bill_sale_id = null
        this.configData = []
      }
      list_for_market_by_contract_id({
        contractId: val,
        mustIncludeBillSaleId: this.mustIncludeBillSaleId,
        type: this.cuForm.type
      }).then(res => {
        this.billSaleArr = res.data
      })
    },
    initUserList() {
      list_by_role_code({ code: 'Design' }).then(res => {
        this.userArr = res.data
      })
    },
    getOptionDisable(val, index) {
      if (val !== -1) {
        // 如果其他的拍照要求包含了此选项 则禁用此选项 或者其他的拍照要求包含的全部 禁用此选项
        let flag = false
        for (let i = 0; i < this.photoRequirementsDataArr.length; i++) {
          if (i !== index) {
            const obj = this.photoRequirementsDataArr[i]
            if (obj.media_type_id === val || obj.media_type_id === -1) {
              flag = true
            }
          }
        }
        return flag
      } else {
        for (let i = 0; i < this.photoRequirementsDataArr.length; i++) {
          if (i !== index) {
            const obj = this.photoRequirementsDataArr[i]
            if (obj.media_type_id !== null) {
              return true
            }
          }
        }
        return false
      }
    },
    addDisable() {
      let arr = []
      for (let i = 0; i < this.photoRequirementsDataArr.length; i++) {
        const obj = this.photoRequirementsDataArr[i]
        if (obj.media_type_id === -1) {
          return true
        } else if (obj.media_type_id !== null && obj.media_type_id != '') {
          arr.push(obj.media_type_id)
        }
      }
      if (arr.length + 1 >= this.mediaSettingType.length) {
        return true
      } else {
        return false
      }
    },
    checkData() {
      if (this.photoRequirementsDataArr.length === 0) {
        this.$message.error('最少有一项拍照要求')
        return false
      }
      if (this.photoRequirementsDataArr.length === 1) {
        this.photoRequirementsDataArr[0].media_type_id = -1
        return true
      }
      for (let i = 0; i < this.photoRequirementsDataArr.length; i++) {
        const obj = this.photoRequirementsDataArr[i]
        if (obj.media_type_id === null || obj.media_type_id == '') {
          this.$message.error('拍照要求中媒体类型不能为空')
          return false
        }
      }
      return true
    },
    save() {
      const flag = this.checkData()
      if (flag) {
        this.cuForm.mediaType2RequireList = {}
        this.photoRequirementsDataArr.forEach(item => {
          let arr = []
          item.arr.forEach(tmp => {
            arr = tmp.arr.concat(arr)
          })
          this.$set(this.cuForm.mediaType2RequireList, item.media_type_id + '', arr)
        })
        const loading = this.$loading({
          lock: true,
          text: '保存中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        save(this.cuForm).then(res => {
          loading.close()
          this.$message.success('保存成功')
          this.closeThisPage()
        }).catch(() => {
          loading.close()
        })
      }
    },
    submit() {
      const flag = this.checkData()
      if (flag) {
        this.cuForm.mediaType2RequireList = {}
        this.photoRequirementsDataArr.forEach(item => {
          let arr = []
          item.arr.forEach(tmp => {
            arr = tmp.arr.concat(arr)
          })
          this.$set(this.cuForm.mediaType2RequireList, item.media_type_id + '', arr)
        })
        const loading = this.$loading({
          lock: true,
          text: '提交中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        begin(this.cuForm).then(res => {
          loading.close()
          this.$message.success('提交成功')
          this.closeThisPage()
        }).catch(() => {
          loading.close()
        })
      }
    },
    pass(opinion) {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      pass({ id: this.cuForm.id, wf_check_opinion: opinion }).then(res => {
        this.$message.success('操作成功')
        this.closeThisPage()
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    returnBack(opinion) {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      return_back({ id: this.cuForm.id, wf_check_opinion: opinion }).then(res => {
        this.$message.success('操作成功')
        this.closeThisPage()
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    remove() {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      remove({ id: this.cuForm.id }).then(res => {
        this.$message.success('操作成功')
        this.closeThisPage()
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    actualDelete() {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      actual_delete({ id: this.cuForm.id }).then(res => {
        this.$message.success('操作成功')
        this.closeThisPage()
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    // 关闭此页面
    closeThisPage() {
      this.$store.dispatch('tagsView/closePage', this.$route.name)
    },
    //获取跨行数
    getRowSpan(item) {
      let count = 0
      item.arr.forEach(tmp => {
        count += tmp.arr.length
      })
      return count
    }
  }
}
</script>

<style scoped>
.title {
  margin-top: 20px;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
}

.header {
  width: 80%;
  margin: 0 auto;
  position: relative;
}

.content {
  margin-top: 20px;
}

.fill_date {
  font-weight: bold;
  position: absolute;
  right: 0;
  top: 0;
  line-height: 25px;
}

.mailTable {
  width: 98%;
  font-size: 14px;
  margin: 0 auto 10px auto;
  border-collapse: collapse;
}

.mailTable tr td {
  height: 60px;
  line-height: 35px;
  box-sizing: border-box;
  padding: 0 10px;
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
  text-align: center;
}

.photoRequirementTable tr td {
  line-height: 20px;
}

.firstTr td {
  border-top: 1px solid #E6EAEE;
}

.firstTd {
  border-left: 1px solid #E6EAEE;
}

.mailTable tr td.column {
  text-align: center;
}

.tip {
  color: red;
  width: 200px;
}

.table-herder {
  background-color: #F5F7FA;
  font-weight: bold;
}

.tip_td {
  padding: 0 20px !important;
  background-color: #F5F7FA;
  font-weight: bold;
  width: 200px;
}

/deep/ .content .el-form-item {
  margin-bottom: 0;
}

/deep/ .el-form-item_inline-block {
  display: inline-block;
  margin: 0 1px 0 1px;
}

/deep/ .el-input.is-disabled .el-input__inner {
  background-color: white;
  color: black;
}

/deep/ .el-textarea.is-disabled .el-textarea__inner {
  background-color: white;
  color: black;
}

/deep/ .el-radio__input.is-disabled + span.el-radio__label {
  color: black;
}

/deep/ .el-radio__input.is-checked .el-radio__inner {
  border-color: #409EFF;
  background: #409EFF
}

/deep/ .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: #FFF;
}
</style>
